<template>
  <h1>这个是子元素的标题</h1>
  <slot name="hash"></slot>
  <slot></slot>
  <slot name="footer"></slot>
  <!-- <p>从父元素获取到的数据msg:{{ $attrs.msg }}</p> -->
  <p>从父元素获取到的数据msg:{{ msg }}</p>
  <p>从父组件传来的数据age:{{ age }}</p>
  <button @click="changeValue">点击打印</button>
</template>

<script>
import { ref, toRef } from "@vue/reactivity";
export default {
  name: "HelloWorld",
  props: ["msg", "age"],
  setup(props, context) {
    // let ages = toRef(props.age);
    // function changeValue() {
    //   console.log(props.age);
    //   ages += 2;
    // }
    // return {
    //   changeValue,
    //   ages,
    // };
  },
  mounted() {
    // 此时组件挂载时打印的就是实例对象
    console.log(this);
  },
};
</script>

<style>
</style>